<!-- 学习组详情页面 -->

<template>
	<focus-body mode="auto">
		
		
		<!-- =============================================== 实占层 -->
		<!-- 顶部间隔 -->
		<focus-box width="100" height="20"></focus-box>
		
		<!-- 基本信息容器 -->
		<focus-box width="750" mode="col" justify="start" align="center" bg="white">
			
			<!-- 容器标题 -->
			<focus-box width="750" :padding="[24,32,16,32]" mode="row" justify="start" position="relative">
				<!-- 标题文字 -->
				<focus-text size="34" color="black" weight="bold" text="基本信息"></focus-text>
				<!-- 状态标签 -->
				
				<focus-box v-if="group.is_check==0" :padding="[4,12]" :radius="[0,0,10,10]"
				position="absolute" top="0" right="32" bg="warning">
					<focus-text size="24" color="white" text="待审核"></focus-text>
				</focus-box>
				
				<focus-box v-else-if="group.is_check==2" :padding="[4,12]" :radius="[0,0,10,10]"
				position="absolute" top="0" right="32" bg="error">
					<focus-text size="24" color="white" text="审核未通过"></focus-text>
				</focus-box>
				
				<focus-box v-else-if="group.is_check==1&&group.state==1" :padding="[4,12]" :radius="[0,0,10,10]"
				position="absolute" top="0" right="32" bg="success">
					<focus-text size="24" color="white" text="学习中"></focus-text>
				</focus-box>
				
				<focus-box v-else-if="group.is_check==1&&group.state==2" :padding="[4,12]" :radius="[0,0,10,10]"
				position="absolute" top="0" right="32" bg="success">
					<focus-text size="24" color="white" text="学习已结束"></focus-text>
				</focus-box>
				
			</focus-box>
			<!-- 间隔 -->
			<focus-box width="100" height="10"></focus-box>
			
			<!-- 所在项目 -->
			<focus-box width="750" :margin="[0,0,30,0]" mode="row" justify="center" align="start">
				<focus-box width="170" mode="row" justify="start">
					<focus-text size="30" color="#999999" text="所在项目"></focus-text>
				</focus-box>
				<focus-box width="517" mode="row" justify="start">
					<focus-text size="30" color="content" :text="group.project"></focus-text>
				</focus-box>
			</focus-box>
			<!-- 工作单位 -->
			<focus-box width="750" :margin="[0,0,30,0]" mode="row" justify="center" align="start">
				<focus-box width="170" mode="row" justify="start">
					<focus-text size="30" color="#999999" text="工作单位"></focus-text>
				</focus-box>
				<focus-box width="517" mode="row" justify="start">
					<focus-text size="30" color="content" :text="group.company"></focus-text>
				</focus-box>
			</focus-box>
			<!-- 创建时间 -->
			<focus-box width="750" :margin="[0,0,30,0]" mode="row" justify="center" align="start">
				<focus-box width="170" mode="row" justify="start">
					<focus-text size="30" color="#999999" text="创建时间"></focus-text>
				</focus-box>
				<focus-box width="517" mode="row" justify="start">
					<focus-text size="30" color="content" :text="group.time"></focus-text>
				</focus-box>
			</focus-box>
			<!-- 学习人数 -->
			<focus-box width="750" :margin="[0,0,30,0]" mode="row" justify="center" align="start">
				<focus-box width="170" mode="row" justify="start">
					<focus-text size="30" color="#999999" text="学习人数"></focus-text>
				</focus-box>
				<focus-box width="517" mode="row" justify="start">
					<focus-text size="30" color="content" :text="group.people+'人'"></focus-text>
				</focus-box>
			</focus-box>
			<!-- 人员名单 -->
			<focus-box width="750" :margin="[0,0,30,0]" mode="row" justify="center" align="start">
				<focus-box width="170" mode="row" justify="start">
					<focus-text size="30" color="#999999" text="人员名单"></focus-text>
				</focus-box>
				<focus-box width="517" mode="row" justify="start">
					<focus-text size="30" color="content" :text="group.crew"></focus-text>
				</focus-box>
			</focus-box>
			
			<!-- 间隔线 -->
			<focus-line length="686" color="info-light" :margin="[0,0,30,0]"></focus-line>
			<!-- 学习组二维码 -->
			<focus-box width="750" :margin="[0,0,30,0]" mode="row" justify="center" align="start">
				<focus-box width="343" mode="row" justify="start">
					<focus-text size="30" color="#999999" text="学习组二维码"></focus-text>
				</focus-box>
				<focus-box width="343" mode="row" justify="end">
					<!-- 二维码图片容器 -->
					<focus-box mode="col" justify="center" align="center">
						<!-- 二维码图片 -->
						<image style="width:160rpx; height:160rpx; margin-bottom:20rpx;" :src="group.QrCode"></image>
						<!-- 提示文字 -->
						<focus-text size="24" color="remark" text="扫码加入学习"></focus-text>
					</focus-box>
				</focus-box>
			</focus-box>
			
			<!-- 间隔线 -->
			<focus-line length="686" color="info-light" :margin="[0,0,30,0]"></focus-line>
			<!-- 现场照片 -->
			<focus-box width="750" :margin="[0,0,30,0]" mode="row" justify="center" align="start">
				<focus-box width="343" mode="row" justify="start">
					<focus-text size="30" color="#999999" text="集体学习现场照片"></focus-text>
				</focus-box>
				<focus-box width="343" mode="row" justify="end">
					<!-- 照片 -->
					<focus-img :size="[240,140]" :src="group.sceneImg" mode="beyond" preview="true" radius="12"></focus-img>
				</focus-box>
			</focus-box>
			
		</focus-box>
		
		<!-- 间隔 -->
		<focus-box width="100" height="20"></focus-box>
		
		<!-- 课程学习记录容器 -->
		<focus-box v-if="course.list.length > 0"
		width="750" mode="col" justify="start" align="center" bg="white">
			
			<!-- 岗位名称栏 -->
			<focus-box width="750" :padding="[24,32,10,32]"
			mode="row" justify="start" align="center">
				<!-- 岗位名称文字 -->
				<focus-text size="34" color="black" weight="bold" text="课程学习记录"></focus-text>
			</focus-box>
			
			<!-- 循环课程列表 -->
			<block v-for="(item2,index2) in course.list" :key="item2.key">
				<!-- 一个课程显示对象 -->
				<course-item
					:courseid="item2.courseId"
					:jieid="item2.jieId"
					:isLine="index2>0 ? true : false"
					:img="item2.img"
					:type="item2.isMust"
					:caption="item2.title"
					:obtained="item2.scoreGet"
					:total="item2.scoreTotal"
					:state="item2.state"
					:statxt="item2.stateTxt"
					@logintouch="onLogintouchCall"
				></course-item>
			</block>
			
		</focus-box>
		
		<!-- 间隔 -->
		<focus-box width="100" height="20"></focus-box>
		
		
		<!-- =============================================== 悬浮层 -->
		<!-- 底部按钮 -->
		<focus-box v-if="group.isAllow==true&&group.state==1" width="750" height="120">
			<!-- 悬浮容器 -->
			<focus-box width="750" height="120" mode="col" justify="center" align="center"
			position="fixed" left="0" bottom="0" index="3x"
			bg="white" shadow="true">
				
				<!-- 结束按钮 -->
				<focus-box width="686" height="80" mode="row" justify="center" align="center"
				bg="primary" bgscheme="hover" radius="40" @click="closeStudyBtnClick">
					<focus-text size="32" color="white" text="结束学习"></focus-text>
				</focus-box>
				
			</focus-box>
		</focus-box>
		
		
		<!-- =============================================== 弹出层 -->
		<!-- 通用信息模态框 -->
		<modal-info ref="myModalInfoDjy"
			mode="warning"
			title="结束课程确定"
			content="一旦结束此课程，你的组员将接收不到你的学习课程！"
			cancelText="取消"
			confirmText="确定"
			@confirm="onConfirmCall"
		></modal-info>
		
		
	</focus-body>
</template>

<script>
	// 接口文件引入
	import request from '../../../common/js/request/learning.js'; // 学习类
	
	/**
	 * 学习组详情页面
	 * @description 以下为页面url传参
	 * @property {String,Number} groupId 学习组ID
	 */
	export default {
		
		// 页面数据
		data() {
			return {
				
				// 页面传参
				send: {
					groupId: 0, // 学习组id
				},
				
				// 基本信息
				group: {
					pageTitle: '', // 页面标题
					groupId: 0, // 学习组id
					state: 0, // 组状态：1-学习中 2-已结束 3-审核不通过
					project: '', // 所在项目
					company: '', // 工作单位
					time: '', // 创建时间
					people: 0, // 学习人数
					crew: '', // 人员名单
					QrCode: '', // 学习组二维码
					sceneImg: '', // 集体学习现场照片
					isAllow: false, // 是否拥有创建许可
				},
				
				// 学习课程数据
				course: {
					list: [], // 课程列表数据
				},
			}
		},
		
		// 页面加载成功
		onLoad(options) {
			// 页面传参 赋值
			this.send = Object.assign(this.send, options);
			// 云函数：百度平台鉴权
			// uniCloud.callFunction({
			// 	name: 'token_baidu', // 你的云函数名称
			// 	data: {
			// 		type: 'face', // 人脸识别的鉴权
			// 	},
			// 	success: (res) => {
			// 		// 将存在的token放入临时缓存
			// 		uni.$focus.varShortTime('set', {
			// 			"baidu_access_token_face": res.result.data.access_token
			// 		});
			// 	}
			// });
		},
		
		// 页面显示
		onShow() {
			// 请求 学习组详情信息
			this.groupDetailsReq();
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			
			// ========================================== 元素事件
			// 底部结束学习按钮 点击
			closeStudyBtnClick() {
				// 弹出模态提示框
				this.$refs.myModalInfoDjy.open();
			},
			// 模态框确定按钮 点击
			onConfirmCall() {
				// 调用结束学习请求
				this.endLearningReq();
			},
			
			
			// ========================================== 接口请求
			// 学习组详情信息
			groupDetailsReq() {
				request.groupDetails({
					urlData: {
						id: this.send.groupId, // 学习组id
					},
					success: (res) => {;
						// 页面标题设置
						if (res.info.pageTitle) { uni.setNavigationBarTitle({ title: res.info.pageTitle }); }
						// 基本信息 赋值
						this.group = res.info;
						// 课程列表数据 赋值
						this.course.list = res.list;
					},
				});
			},
			
			// 结束学习
			endLearningReq() {
				request.endLearning({
					urlData: {
						id: this.send.groupId, // 学习组id
					},
					success: (res) => {
						// 修改当前组状态
						this.group.state = 2;
						// 重新请求 学习组详情信息
						this.groupDetailsReq();
					},
				});
			},
			
		},
	}
</script>